<template>
	<view class="content">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">搜索师傅信息</view>
		</u-navbar>
		<view class="center">
			<view class="search">
				<view class="searchTop">
					<view class="addr" @click="showCity">
						<text>{{seachform.cityName?seachform.cityName:'地点'}}</text>
						<u-icon name="arrow-down" color="#000" size="12"></u-icon>
					</view>
					<view class="search">
						  <u-icon name="search" color="#000" size="24"></u-icon>
						  <u--input
							v-model="seachform.searchName"
							border="none"
							placeholder="搜索你要找的师傅"
							color="#A1A1A1"
							placeholderStyle="color:rgba(255,255,255,.5)"></u--input>
					</view>
					<view class="right" @click="sendSearch">搜索</view>
				</view>
			</view>			
		</view>
		
		
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList &&cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(cityitem,cityindex) in cityList" 
							:key="cityindex" 
							:class="{'shengActive':(si==cityindex && isclickCitysheng == true)}"
							v-if="cityitem.pid==0"
							@click="shengClick(cityitem,cityindex)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList[si].childone" 
							:key="shiIndex"
							:class="{'shiActive':(ci == shiIndex && isclickCityshi == true)}"
							@click="shiClick(shiItem,shiIndex)"
							style="width: 380rpx;"
							>
								{{shiItem.name}}
							</view>
						</scroll-view>
					</view>
				 	<!-- <view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in cityList[si].childone[ci].child" :key="quindex"
							:class="{'quActive':(qi==quindex && isclickCityqu == true)}"
							@click="quClick(quitem,quindex)">
								{{cutstr(quitem.name,10)}}
							</view>
						</scroll-view>
					</view> -->
				 </view>
				 
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanAddresIndex">清除</view>
					 <view class="addres-btn" @click="getCheckAddress">确定选择</view>
				 </view>
			 </view>
		</pop>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import pop from "@/components/ming-pop/ming-city.vue"
	import Index from '@/common/index-model.js'
	let index=new Index();
	export default {
		data() {
			return {
				direction:'below',
				seachform: {
					cityid:'',
					cityName:'',
					searchName:''
				},
				cityList:[], //省市区 数据列表
				si:0, //省下标
				ci:0, //市下标
				qi:0, //区下标
				isclickCitysheng:false,//省是否被点击
				isclickCityshi:false,//市是否被点击
				isclickCityqu:false,//区是否被点击
			};
		},
		components: {
			pop
		},
		onLoad() {
			this.getCityList()
		},
		methods: {
			showCity() {
				console.log(1)
				this.$refs.city.show()
			},
			sendSearch(){
				if(this.seachform.searchName == ''){
					index.show_tips('请输入搜索关键词')
					return false
				}
				let url="../worksearchList/index?key="+this.seachform.searchName+"&cityid="+this.seachform.cityid;
				index.redirectto(url)
			},
			//点击省切换
			shengClick(item,rv) {
				this.si = rv 
				this.ci = 0
				this.qi =0
				this.isclickCitysheng = true
				this.isclickCityshi = false 
				this.isclickCityqu = false
			},
			//点击市切换
			shiClick(item,cv) {
				this.ci = cv
				this.qi = 0
				this.isclickCityshi = true
			},
			quClick(item,qus) {
				this.qi = qus
				this.isclickCityqu = true
			},
			//清除选中的地址
			cleanAddresIndex() {
				this.si = 0
				this.ci = 0
				this.qi = 0
				this.$refs.city.close()
			},
			//按地点查询
			getCheckAddress() {
				let sendpostData = {
					"provinceId":this.cityList[this.si].id,
					"cityId":this.cityList[this.si].childone[this.ci].id
				}
				if(!this.cityList[this.si].id || !this.cityList[this.si].childone[this.ci].id){
					index.show_tips('请认真选择地址')
					return false
				}
				this.seachform.cityid = this.cityList[this.si].childone[this.ci].id
				this.seachform.cityName = this.cityList[this.si].childone[this.ci].name
				this.$refs.city.close();
			},
			//获取省市区数据列表
			getCityList() {
				index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
					//console.log(res,'城市')
					if(res.data.code == 200 && res.data.success){
						let arr=res.data.result
						let provList = []
						if(arr.length>0){
							for(let i=0;i<arr.length;i++){
								if(arr[i].pid==0){
									provList.push(arr[i])
								}
							}
							if(provList.length>0){
								for(let i=0;i<provList.length;i++){
									provList[i].childone = []
									for(let j=0;j<arr.length;j++){
										//console.log(arr[j].id,'====arr[j].id ====')
										if(arr[j].pid == provList[i].id){
											provList[i].childone.push(arr[j])
										}
									}
								}
								//三级区
								for(let m=0;m<provList.length;m++){
									if(provList[m].childone.length>0){
										for(let n=0;n<provList[m].childone.length;n++){
											provList[m].childone[n].child=[]
											for(let k=0;k<arr.length;k++){
												if(arr[k].pid == provList[m].childone[n].id){
													provList[m].childone[n].child.push(arr[k])
												}
											}
										}
									}
								}
							}
							this.cityList = provList
						}else{
							if(res.data.code == '401'){
								uni.removeStorageSync('')
							}
							arr=[]
						}
					}
				})
			},
			cutstr(str, len) {
				var str_length = 0;
				var str_len = 0;
				var str_cut = new String();
				str_len = str.length;
				for (var i = 0; i < str_len; i++) {
					var a = str.charAt(i);
					str_length++;
					if (escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if (str_length >= len) {
						str_cut = str_cut.concat("...");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if (str_length < len) {
					return str;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
@import url("index.css");
@import url("@/static/css/publics.css");
::v-deep {
  .u-navbar--fixed {	  
	  background: #fff;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
    }
  }
}

.content{
	background: #fff!important;
	height: 100vh;
}
.center{
	padding: 0rpx 20rpx 0rpx 20rpx;
	background: #fff;
	.searchTop {
	  display: flex;
	  padding: 20rpx;
	  align-items: center;
	  .addr{
		  color: #424242;
		  display: flex;
		  margin-right: 16rpx;
		  text{
			  margin-right: 4rpx;
		  }
	  }
	  .search {
	    flex: 1;
	    display: flex;
	    background: rgba($color: #E4F0FF, $alpha: 0.3);
	    height: 60rpx;
	    padding: 0 10rpx;
	    border-radius: 8rpx;
	    margin-right: 20rpx;
	    ::v-deep {
	      .u-input {
	        margin: 0 10rpx;
	      }
	    }
	  }
	  .right {
	    color: #0F0F0F;
	  }
	}
}

</style>